<template>
    <div>
         <Header></Header>
        <div class="mblog">
            <el-row type="flex" justify="center">
            <el-col :span="10">
                <h2 class="div1">{{article.title}}</h2>
            </el-col>
        </el-row>

            <div class="markdown-body">
<!--                <pre v-highlight><code class="python" v-html="article.content"></code></pre>-->
                <div   v-html="article.content"></div></div>
        </div>
    </div>
</template>

<script>
import Header from './component/Header';
import 'github-markdown-css';
export default {
    name: 'BlogDetail',
    components: { Header },
    data() {
        return {

            // a:'<pre><code class="language-powershell">',
            a:'<pre>',
            b:'<pre style="background-color: #00ffff">',
            article: {
                articleAuthor: '',
                categories: '',
                content: '',
                created: '',
                tags: '',
                title: ''
            }
        };
    },
    created() {
        const _this = this;
        // console.log('this.$route.params.blogId=>' + this.$route.params.articleId);
        this.$axios.get('http://39.106.115.234:8083/article/detail/' + this.$route.params.articleId).then((res) => {
            // console.log(res.data);
            // console.log(res.data.data)
            console.log(res.data.data.content);
            _this.article.title = res.data.data.title;
            // console.log(_this.article.title)
            _this.article.categories = res.data.data.categories;
            // console.log(_this.article.categories)
            _this.article.content = res.data.data.content;
            _this.article.created = res.data.data.created;
            _this.article.tags = res.data.data.tags;
            _this.article.title = res.data.data.title;
            // //markdown渲染内容
            var MarkDownIt = require('markdown-it');
            var md = new MarkDownIt();
            var result = md.render(res.data.data.content);
            // result.replace("&lt;pre&gt;&lt;code class=&quot;language-powershell&quot;&gt;","&lt;pre style=&quot;background-color: yellow&quot;&gt;&lt;code class=&quot;language-powershell&quot; &gt;");
            // var a='<pre><code class="language-powershell">';
            // this.a.indexOf("language")>0

            result=result.replaceAll(this.a,this.b);
            // this.a.replace(this.a,this.b);
            // this.a=this.b;


            // result.replace("<pre><code class=\"language-powershell\">","<pre style=\"background-color: yellow\"><code class=\"language-powershell\" >");
            _this.article.content = result;
            console.log(_this.article.content);
            console.log("dsvewohoewhfoewhfohewiu");
            console.log(this.a);
        });
    }
};
</script>

<style scoped>
.mblog {
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
    width: 100%;
    min-height: 900px;
    padding: 20px 15px;
}
.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
    /*background-color: #8c939d;*/
    /*opacity:0.;*/
}

@media (max-width: 767px) {
    .markdown-body {
        padding: 15px;
    }
}

.div1 {
    text-align: center;
    line-height: 33px;
    font-size: 30px;
}
.a{
    margin:20px;
    border-width:2px;
    border-color:"#ff00ff";
    background:#fac002;
}
.b{
    margin:20px;
    border-width:2px;
    border-color:"#ff00ff";
    background:#9eafaf;
    opacity:0.3;

}
</style>
